console.log('inject')


class Inject {
    constructor() {
        this.rootDiv = null;
    }

    init() {
        const rootDivName = 'chrome-inject-div';
        let ret = document.getElementById(rootDivName);
        if (!ret) {
            let div = document.createElement('panel')
            div.id = rootDivName;
            document.body.appendChild(div);
            ret = div;
        }
        this.rootDiv = ret;
    }

    initVue() {
        this.initComp();
        new Vue({el: this.rootDiv})
    }

    initComp() {
        Vue.component('panel', {
            template: `
            <div style="position: fixed;top:0;right: 0;width: 400px;z-index: 99999;background-color: #d5d0d0; display: flex;flex-direction: column;">
                 <button @click="onClickShow">{{getBtnName()}}</button>
                 <div v-if="isShow" style="display: flex;flex-direction: column; ">
                    <div style="display: flex;flex-direction: row;">
                        <span style="width: 120px;">URL PATH: </span>
                        <input style="flex:1" v-model="urlPath"/>
                    </div>
                    <div style="display: flex;flex-direction: row;align-items: center;">
                        <span style="width: 120px;">POST CONTENT:</span>
                        <input style="flex:1" v-model="postContent"/>
                    </div>
                    <div style="display: flex;flex-direction: row-reverse;align-items: center;">
                        <button style="width: 140px;height: 30px;" @click="onClick">REQUEST</button>
                    </div>
                    <textarea style="flex:1;resize: none;min-height: 400px;margin: 0;padding: 0;"  :value="result"></textarea>
                </div>
            </div>
           
            `,
            name: 'panel',
            props: {},
            data() {
                return {
                    isShow: true,
                    urlPath: '',
                    postContent: '',
                    result: 'test',
                }
            },
            created() {
                const ret = localStorage.getItem('show');
                this.isShow = ret === 'true'
            },
            methods: {
                getBtnName() {
                    return this.isShow ? '隐藏' : '显示'
                },
                onClickShow() {
                    this.isShow = !this.isShow;
                    localStorage.setItem('show', this.isShow)
                },
                onClick() {
                    // 在这里写逻辑就行啦
                    console.log(this.urlPath, this.postContent)
                    this.result = document.cookie;
                }
            },

        })
    }
}

const inject = new Inject();
inject.init();
inject.initVue();
